<div ng-if="vm.ShowControls" ng-include="'app/layout/FABGoBack.html'"></div>
<section id="demo-view" class="mainbar layout layout-wrap referralviewblock" layout="column" layout-align="sapce-around">
    <br />
    <div class="layout layout-wrap" layout="row" layout-align="center center" flex="90">
        <md-card class="layout layout-fill md-whiteframe-9dp DemoCard" flex="90">
            <md-card-content>
                <div class="layout layout-wrap" layout="row" layout-align="center center" flex="90">
                <img class="logo" src="../../images/logo.png" />
                    </div><br/>
                <md-toolbar class="layout-wrap flex">

                    <h2>New User Registration</h2>
                </md-toolbar>
                <form name="NewUserForm">
                    <md-input-container class="md-icon-float md-block md-accent">
                        <label>Username</label>
                        <!--<md-icon md-svg-src="img/icons/ic_person_24px.svg" class="name" ></md-icon>-->
                        <input required ng-model="vm.user" type="email" name="username" ng-pattern="/^.+@.+\..+$/" minlength="10" maxlength="100">
                        <div ng-messages="NewUserForm.username.$error" role="alert">
                            <div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']">
                                Your username is required and must be an email address
                            </div>
                        </div>
                    </md-input-container>

                    <md-input-container class="md-icon-float md-block md-accent">
                        <label>First Name</label>
                        <!--<md-icon md-svg-src="img/icons/ic_person_24px.svg" class="name" ></md-icon>-->
                        <input required ng-model="vm.fname" name="firstname">
                        <div ng-messages="NewserForm.firstname.$error" role="alert">
                            <div ng-message-exp="['required']">
                                Your First Name is required.
                            </div>
                        </div>
                    </md-input-container>

                  <md-input-container class="md-icon-float md-block md-accent">
                      <label>Last Name</label>
                      <!--<md-icon md-svg-src="img/icons/ic_person_24px.svg" class="name" ></md-icon>-->
                      <input required ng-model="vm.lname" name="lastname">
                      <div ng-messages="NewserForm.lastname.$error" role="alert">
                          <div ng-message-exp="['required']">
                              Your Last Name is required.
                          </div>
                      </div>
                    </md-input-container>

                    <md-input-container class="md-icon-float md-block md-accent">
                        <label>User Type</label>
                        <md-select name="usertype" class="md-accent" ng-model="vm.usertype" required>
                            <md-option value="Physician">
                                Physician
                                </md-option>
                                <md-option value="Controller">
                                    Controller
                                </md-option>
                            <md-option value="MA">
                                Medical Assistant
                            </md-option>
                        </md-select>
                        <div ng-messages="NewserForm.usertype.$error" role="alert">
                            <div ng-message-exp="['required']">
                                User Type is required.
                            </div>
                        </div>
                    </md-input-container>

                    <md-input-container class="md-icon-float md-block md-accent">
                        <label>Secret Question</label>
                        <md-select name="secretqn" class="md-accent" ng-model="vm.secretqn" required>
                            <md-option value="What was your favorite place to visit as a child?">
                                What was your favorite place to visit as a child?
                            </md-option>
                            <md-option value="Who is your favorite actor, musician, or artist?">
                                Who is your favorite actor, musician, or artist?
                            </md-option>
                            <md-option value="What is the name of your favorite pet?">
                                What is the name of your favorite pet?
                            </md-option>
                            <md-option value="In what city were you born?">
                                In what city were you born?
                            </md-option>
                            <md-option value="What high school did you attend?">
                                What high school did you attend?
                            </md-option>
                            <md-option value="What is the name of your first school?">
                                What is the name of your first school?
                            </md-option>
                            <md-option value="What is your favorite movie?">
                                What is your favorite movie?
                            </md-option>
                            <md-option value="What is your mother's maiden name?">
                                What is your mother's maiden name?
                            </md-option>
                            <md-option value="What street did you grow up on?">
                                What street did you grow up on?
                            </md-option>
                            <md-option value="In what city or town does your nearest sibling live?">
                                In what city or town does your nearest sibling live?
                            </md-option>
                            </md-select>
                            <div ng-messages="NewserForm.secretqn.$error" role="alert">
                                <div ng-message-exp="['required']">
                                    Secret Question is required.
                                </div>
                            </div>
            </md-input-container>


                    <md-input-container class="md-block">
                        <label>Secret Answer</label>
                        <!--<md-icon md-svg-src="img/icons/ic_person_24px.svg" class="name" ></md-icon>-->
                        <input required ng-model="vm.secretans" type="password" name="secretans">
                        <div ng-messages="NewserForm.secretans.$error" role="alert">
                            <div ng-message-exp="['required']">
                                Secret Answer is required.
                            </div>
                        </div>
                    </md-input-container>

                    <md-input-container class="md-icon-float md-block md-accent">
                        <label>Password</label>
                        <!--<md-icon md-svg-src="img/icons/ic_person_24px.svg" class="password" ></md-icon>-->
                        <input ng-model="vm.password" type="password" name="password" ng-minlength="6" required>
                        <div ng-messages="NewUserForm.password.$error" role="alert">
                            <div ng-message-exp="['required', 'minlength']">
                                Your password is required
                            </div>
                        </div>
                    </md-input-container>

                    <md-card-footer>
                        <label class="ErrText">{{vm.ErrorMessage}}</label>
                        <div class="md-actions" layout="row" layout-align="space-around center">

                            <md-button class="md-raised md-primary" ng-click="vm.NewUserClick()" ng-disabled="NewUserForm.$invalid">Register</md-button>
                        </div>
                    </md-card-footer>
                </form>
            </md-card-content>
        </md-card>
    </div>
</section>


